import React, {Component} from 'react';
import {
  View,
  Text,
  Alert,
  Button,
  ToastAndroid,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
  Image,
  Linking,
  Clipboard,
} from 'react-native';
let yellow = '#FF9933';
let uid = 167334;
import {setToastMsg} from '../../../actions/index';
import {connect} from 'react-redux';
//import {getData} from '../storageImpl';
let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;
let barLength = widthScreen * 0.9;
class Vote extends Component {
  static defaultProps = {
    voteAgreeRes: 51,
    voteDisagreeRes: 50,
    voteAgreeUrl: '',
    voteDisagreeUrl: '',
  };
  constructor(props) {
    super(props);

    this.state = {
      deadline: '2020/01/01 18:00',
      ver: 1,
      ratio: 50.01,
    };
  }
  copy(url) {
    // ToastAndroid.show('复制成功', ToastAndroid.SHORT);
    Clipboard.setString(url);
    this.props.setToastMsg('复制成功');
  }
  componentDidMount() {
    this.setState({
      ratio:
        Math.floor(
          (this.props.voteAgreeRes /
            (this.props.voteAgreeRes + this.props.voteDisagreeRes)) *
            10000,
        ) / 100,
    });
  }

  render() {
    if (this.props.stage === 0) {
      return (
        <View
          style={{
            height: heightScreen * 0.238,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.yellowRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>表决阶段</Text>
                <Text
                  style={{
                    marginTop: heightScreen * 0.0085,
                    marginLeft: widthScreen * 0.008,
                    color: '#999999',
                    fontSize: heightScreen * 0.0165,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  已经结束了~
                </Text>
              </View>
              <View style={proposalInfoPageStyle.yellowLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.graySubtitle}>于</Text>
            <Text style={proposalInfoPageStyle.yellowSubtitle}>
              {this.state.deadline}
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>结束</Text>
          </View>
          <View style={{flexDirection: 'row', marginTop: heightScreen * 0.005}}>
            <Text
              style={{
                marginTop: heightScreen * 0.003,
                marginLeft: widthScreen * 0.049,
                color: '#444444',
                fontSize: heightScreen * 0.018,
                //fontFamily: 'MicrosoftYaHei',
              }}>
              表决结果：
            </Text>
            <Text
              style={{
                fontSize: heightScreen * 0.022,
                color: '#999999',
                //fontFamily: 'MicrosoftYaHei',
                fontWeight: '400',
              }}>
              加载中...
            </Text>
          </View>
        </View>
      );
    } else if (this.props.stage === 2) {
      return (
        <View
          style={{
            height: heightScreen * 0.257,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.yellowRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>表决阶段</Text>
                <Text style={proposalInfoPageStyle.yellowSubtitle2}>
                  正在进行...
                </Text>
              </View>
              <View style={proposalInfoPageStyle.yellowLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.graySubtitle}>于</Text>
            <Text style={proposalInfoPageStyle.yellowSubtitle}>
              {this.state.deadline}
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>结束</Text>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.049,
              marginRight: widthScreen * 0.075,
              marginTop: heightScreen * 0.025,
              flexDirection: 'row',
              alignItems: 'space-between',
              justifyContent: 'space-between',
            }}>
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={{fontSize: heightScreen * 0.018, color: yellow}}>
                  赞成票
                </Text>
                <Text
                  style={{fontSize: heightScreen * 0.018, color: '#333333'}}>
                  Token地址
                </Text>
                <Text
                  style={{
                    marginLeft: widthScreen * 0.006,
                    marginTop: heightScreen * 0.0035,
                    fontSize: heightScreen * 0.015,
                    color: '#999999',
                  }}>
                  点击复制
                </Text>
              </View>
              <TouchableOpacity
                onPress={() => {
                  this.copy(this.props.voteAgreeUrl);
                }}>
                <View
                  style={{
                    marginLeft: widthScreen * 0.005,
                    width: widthScreen * 0.427,
                    height: heightScreen * 0.065,
                    borderColor: '#FFCC99',
                    borderWidth: 0.8,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      marginLeft: widthScreen * 0.029,
                      marginRight: widthScreen * 0.029,
                      fontSize: heightScreen * 0.0155,
                      color: '#666666',
                      lineHeight: heightScreen * 0.022,
                    }}>
                    {this.props.voteAgreeUrl}
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text
                  style={{fontSize: heightScreen * 0.018, color: '#666666'}}>
                  反对票
                </Text>
                <Text
                  style={{fontSize: heightScreen * 0.018, color: '#333333'}}>
                  Token地址
                </Text>
                <Text
                  style={{
                    marginLeft: widthScreen * 0.006,
                    marginTop: heightScreen * 0.0035,
                    fontSize: heightScreen * 0.015,
                    color: '#999999',
                  }}>
                  点击复制
                </Text>
              </View>
              <TouchableOpacity
                onPress={() => {
                  this.copy(this.props.voteDisagreeUrl);
                }}>
                <View
                  style={{
                    marginLeft: widthScreen * 0.005,
                    width: widthScreen * 0.427,
                    height: heightScreen * 0.065,
                    borderColor: '#CCCCCC',
                    borderWidth: 0.8,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Text
                    style={{
                      marginLeft: widthScreen * 0.029,
                      marginRight: widthScreen * 0.029,
                      fontSize: heightScreen * 0.0155,
                      color: '#666666',
                      lineHeight: heightScreen * 0.022,
                    }}>
                    {this.props.voteDisagreeUrl}
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
          {/*<TouchableOpacity*/}
          {/*  style={{*/}
          {/*    marginTop: heightScreen * 0.005,*/}
          {/*    marginLeft: widthScreen * 0.042,*/}
          {/*    width: widthScreen * 0.41,*/}
          {/*  }}>*/}
          {/*  <Text style={proposalInfoPageStyle.yellowSubtitle2}>*/}
          {/*    不了解投票的方法？点击这里*/}
          {/*  </Text>*/}
          {/*</TouchableOpacity>*/}
        </View>
      );
    } //TODO 上边删了 “不了解投票的方法？点击这里”
    else if (this.props.stage > 2) {
      return (
        <View
          style={{
            height: heightScreen * 0.238,
            marginTop: heightScreen * 0.009,
            backgroundColor: '#FFFFFF',
          }}>
          <View
            style={{
              marginTop: 0.016 * heightScreen,
              marginLeft: widthScreen * 0.053,
              flexDirection: 'row',
            }}>
            <View style={proposalInfoPageStyle.yellowRect} />
            <View>
              <View style={{flexDirection: 'row'}}>
                <Text style={proposalInfoPageStyle.title}>表决阶段</Text>
                <Text
                  style={{
                    marginTop: heightScreen * 0.0085,
                    marginLeft: widthScreen * 0.008,
                    color: '#999999',
                    fontSize: heightScreen * 0.0165,
                    //fontFamily: 'MicrosoftYaHei',
                  }}>
                  已经结束了~
                </Text>
              </View>
              <View style={proposalInfoPageStyle.yellowLine} />
            </View>
          </View>
          <View
            style={{
              marginLeft: widthScreen * 0.048,
              flexDirection: 'row',
              width: widthScreen * 0.85,
            }}>
            <Text style={proposalInfoPageStyle.graySubtitle}>于</Text>
            <Text style={proposalInfoPageStyle.yellowSubtitle}>
              {this.state.deadline}
            </Text>
            <Text style={proposalInfoPageStyle.graySubtitle}>结束</Text>
          </View>
          <View style={{flexDirection: 'row', marginTop: heightScreen * 0.005}}>
            <Text
              style={{
                marginTop: heightScreen * 0.003,
                marginLeft: widthScreen * 0.049,
                color: '#444444',
                fontSize: heightScreen * 0.018,
                //fontFamily: 'MicrosoftYaHei',
              }}>
              表决结果：
            </Text>
            <Text
              style={
                this.state.ratio > 50
                  ? {
                      fontSize: heightScreen * 0.022,
                      color: yellow,
                      //fontFamily: 'MicrosoftYaHei',
                      fontWeight: '400',
                    }
                  : {
                      fontSize: heightScreen * 0.022,
                      color: '#999999',
                      //fontFamily: 'MicrosoftYaHei',
                      fontWeight: '400',
                    }
              }>
              {this.state.ratio > 50 ? '通过' : '否决'}
            </Text>
          </View>
          <View>
            <View
              style={{
                marginTop: heightScreen * 0.02,
                height: heightScreen * 0.024,
                marginLeft: widthScreen * 0.05,
                width: barLength,
                flexDirection: 'row',
              }}>
              <View
                style={{
                  width:
                    barLength * this.state.ratio * 0.01 - barLength * 0.0015,
                  height: heightScreen * 0.024,
                  borderRadius: heightScreen * 0.008,
                  backgroundColor: '#FFCC99',
                }}
              />
              <View
                style={
                  this.state.ratio > 50
                    ? {
                        marginTop: heightScreen * 0.009,
                        width: barLength * 0.003,
                        backgroundColor: '#FFCC99',
                        height: heightScreen * 0.058,
                      }
                    : {
                        marginTop: heightScreen * 0.009,
                        width: barLength * 0.003,
                        backgroundColor: '#CCCCCC',
                        height: heightScreen * 0.058,
                      }
                }
              />
              <View
                style={{
                  width:
                    barLength * (1 - this.state.ratio * 0.01) -
                    barLength * 0.0015,
                  height: heightScreen * 0.026,
                  borderRadius: heightScreen * 0.008,
                  backgroundColor: '#CCCCCC',
                }}
              />
            </View>
            <Text
              style={
                this.state.ratio > 50
                  ? {
                      marginTop: heightScreen * 0.002,
                      marginLeft: widthScreen * 0.05,
                      width:
                        barLength * this.state.ratio * 0.01 -
                        heightScreen * 0.01,
                      textAlign: 'right',
                      color: yellow,
                      fontSize: heightScreen * 0.018,
                    }
                  : {
                      marginTop: heightScreen * 0.002,
                      marginLeft:
                        barLength * this.state.ratio * 0.01 +
                        barLength * 0.003 +
                        heightScreen * 0.035,
                      color: '#999999',
                      fontSize: heightScreen * 0.018,
                    }
              }>
              {this.state.ratio > 50
                ? this.state.ratio + '%赞成'
                : 100 - this.state.ratio + '%反对'}
            </Text>
            <Text
              style={
                this.state.ratio > 50
                  ? {
                      marginLeft: widthScreen * 0.05,
                      width:
                        barLength * this.state.ratio * 0.01 -
                        heightScreen * 0.01,
                      textAlign: 'right',
                      color: yellow,
                      fontSize: heightScreen * 0.018,
                    }
                  : {
                      marginLeft:
                        barLength * this.state.ratio * 0.01 +
                        barLength * 0.003 +
                        heightScreen * 0.035,
                      color: '#999999',
                      fontSize: heightScreen * 0.018,
                    }
              }>
              共计
              {this.state.ratio > 50
                ? this.props.voteAgreeRes
                : this.props.voteDisagreeRes}
              票
            </Text>
          </View>
        </View>
      );
    }
  }
}
export default connect(
  null,
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
  }),
)(Vote);
const proposalInfoPageStyle = StyleSheet.create({
  title: {
    marginTop: heightScreen * 0.001,
    marginBottom: heightScreen * 0.002,
    marginLeft: widthScreen * 0.012,
    fontSize: heightScreen * 0.022,
    color: '#000000',
    //fontFamily: 'MicrosoftYaHei',
    fontWeight: '400',
  },
  graySubtitle: {
    color: '#999999',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  yellowSubtitle: {
    color: yellow,
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  yellowSubtitle2: {
    marginTop: heightScreen * 0.0085,
    marginLeft: widthScreen * 0.008,
    color: '#FFCC99',
    fontSize: heightScreen * 0.0165,
    //fontFamily: 'MicrosoftYaHei',
  },
  yellowRect: {
    marginTop: heightScreen * 0.002,
    width: widthScreen * 0.02,
    height: heightScreen * 0.033,
    backgroundColor: yellow,
  },
  yellowLine: {
    marginLeft: widthScreen * 0.011,
    height: 1,
    width: widthScreen * 0.38,
    backgroundColor: yellow,
  },
});
